<template>
  <div id="member" class="wrapper-fixed">
    <div class="action-bar-wrapper">
      <el-col :span="24" class="action-bar">
        <el-input v-model="searchText" placeholder="用户昵称或手机号" style="width:300px"></el-input>
        <el-select v-model="isVipCompanyOption" clearable placeholder="会员单位用户" style="margin:0 20px;">
          <el-option
            v-for="item in isVipCompanyOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <!--            <el-select v-model="payStatusOption"  clearable placeholder="付款状态" style="margin:0 20px;">-->
        <!--                <el-option-->
        <!--                v-for="item in payStatusOptions"-->
        <!--                :key="item.value"-->
        <!--                :label="item.label"-->
        <!--                :value="item.value">-->
        <!--                </el-option>-->
        <!--            </el-select>-->

        <el-button type="primary" size="medium" @click="search">检索</el-button>
      </el-col>
      <el-col class="action-bar screen">
        <el-checkbox label="付费套餐" name="meal" v-model="showColumns.meal"></el-checkbox>
        <!--                    <el-checkbox label="付费状态" name="payStatus" v-model="showColumns.payStatus"></el-checkbox>-->
        <el-checkbox label="付款时间" name="payTime" v-model="showColumns.payTime"></el-checkbox>
        <el-checkbox label="套餐到期时间" name="dueTime" v-model="showColumns.dueTime"></el-checkbox>
      </el-col>
    </div>

    <!-- 列表 -->
    <el-table
      :data="tableData"
      v-loading="tableLoadingShow"
      element-loading-text="拼命加载中"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="头像"
        width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.user_info">
            <img :src="scope.row.user_info.photo_url" alt=""
                 style="width:60px;border-radius:50%;height:60px;object-fit:cover">
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名/昵称"
        width="180">
        <template slot-scope="scope" v-if="scope.row.user_info">
          <div>{{scope.row.user_info.realname?scope.row.user_info.realname:scope.row.user_info.nickname}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="会员单位用户"
        width="200"
      >
        <template slot-scope="scope" v-if="scope.row.user_info">
          <div>
            <el-tag type="success" v-if="scope.row.user_info.is_member_unit==1">是</el-tag>
            <el-tag type="info" v-if="scope.row.user_info.is_member_unit==0">否</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="付费套餐"
        v-if="showColumns.meal"
        width="100"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.user_info">
            {{scope.row.user_info.vip_package_name==''?'无':scope.row.user_info.vip_package_name}}
          </div>
        </template>
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="address"-->
<!--        label="付费状态"-->
<!--        v-if="showColumns.payStatus"-->
<!--        width="100"-->
<!--      >-->

<!--      </el-table-column>-->
      <el-table-column
        prop="created_at"
        label="付费时间"
        v-if="showColumns.payTime"
        width="200"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.user_info">
            {{scope.row.user_info.vip_package_time==''?'无':scope.row.user_info.vip_package_time}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="套餐到期时间"
        v-if="showColumns.dueTime"
        width="200"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.user_info">
            {{scope.row.user_info.vip_package_end_time==''?'无':scope.row.user_info.vip_package_end_time}}
          </div>
        </template>
      </el-table-column>

      <!-- <el-table-column label="操作" width='143'>
          <template slot-scope="scope">
            <el-button type="primary" size="medium" >编辑（未有）</el-button>
          </template>
      </el-table-column> -->

    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          :page-size="16"
          layout="prev, pager, next"
          :total="totalPage"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </el-col>
    <!-- 列表end -->

    <!-- 在职证明弹窗 -->
    <el-dialog title="在职证明" :visible.sync="certificationVisible" @close="initData">
      <div>这是在职证明11111</div>
    </el-dialog>
    <!-- 在职证明弹窗end -->


  </div>
</template>
<script>
  export default {
    name: 'member',
    data() {
      return {
        certificationVisible: false,//查看个性签名弹窗状态
        menuBandVisible: false,//绑定套餐
        searchText: '',
        userAuthId: '',//选中的用户id

        isVipCompanyOption: '',//头部筛选的会员单位用户
        isVipCompanyOptions: [
          {label: '是', value: 1},
          {label: '否', value: 0}
        ],

        payStatusOption: '',//头部筛选的付款状态
        payStatusOptions: [
          {label: '全部', value: 0},
          {label: '待付款', value: 1},
          {label: '已付款', value: 2}

        ],

        showColumns: {
          meal: true,
          payStatus: true,
          payTime: true,
          dueTime: true
        },

        tableData: [{}],
        page: 1,
        totalPage: 0,
        tableLoadingShow: false
      }
    },
    watch: {},
    methods: {
      search() {
        this.tableLoadingShow = true;
        this.page = 1;
        this.getVipUserList()
      },
      async getVipUserList() {
        //获取会员列表
        let params = {
          page: this.page,
          limit: 16,
          keyword: this.searchText,
          is_member_unit: this.isVipCompanyOption
        }
        let res = await this.$api.getVipUserList(
          params);
        if (res.data.level == 'success') {
          this.tableData = res.data.data;
          this.totalPage = res.data.page_info.total;
        }
        this.tableLoadingShow = false;
      },
      pageChange(e) {
        //翻页
        this.page = e;
        this.getUserList();
      },
      async bannedPost(id, flag) {
        //封号
        let judge = null;
        let tit = flag ? '对该用户进行封号?' : '取消该用户的封号??';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        console.log(judge)
      },

      showCertification() {
        //显示在职证明
        this.certificationVisible = true
      },
      showMenu_band() {
        //显示绑定弹窗
        this.menuBandVisible = true
      },
      toCustomer_detail(id) {
        this.$router.push({name: 'Customer_detail', query: {id: id}})
      },
      initData() {

      }

    },
    mounted() {
      this.getVipUserList()
    },
  }
</script>
<style lang="scss" scoped>
  .screen {
    margin-top: -10px !important;
  }

  .action-bar-wrapper {
    position: sticky;
    z-index: 1;
    top: -10px;
  }

  .action-bar {
    background-color: #f2f2f2;

    height: 60px;
    margin: 10px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;

    .action-bar-input {
      width: 250px;
      margin-right: 14px;
    }

    .task-form-text {
      color: #666666;
    }
  }

  .el-table-style {
    width: 100%;
    border: 1px solid #f2f2f2;
  }

  .footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    padding: 8px;
    margin: 10px 0px;
    box-sizing: border-box;
  }

  .dialog-footer {
    text-align: center;
  }

  .executorList {
    display: flex;
    flex-wrap: wrap;

    div {
      margin: 10px;
      border: 1px solid #eee;
      border-radius: 5px;
      padding: 5px 10px;
    }
  }
</style>
